import React, { useState } from "react";
import { connect } from "react-redux";
import ProFrom from "./components/ProFrom";
import { SuperFoot } from './styled';
import { Button, Form, Card } from "antd";
import { CloseOutlined, SaveOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import ProCheckGroup from './components/ProCheckGroup'
import ProTransfer from './components/ProTransfer'
import * as actionTypes from "../../store/actionCreators";
import { ITempUserInfo } from './interFace';
import { IDefaultState } from "../../global/globalInterFace";


interface IProps{
    dataSource: [],
    addItemDispatch(info:any): void,
    history: any // 第三方库
}

const number:number = Math.floor((Math.random()*10)+1);

const tempUserInfo: ITempUserInfo = {
    number,
    name: `耶巴蒂`,
    defaultValue: 'Default',
    PartPassword: '',
    ModePassword: '89757'
};


function ConferenceAdd(props: IProps) {
    // 个人信息
    let [userInfo, setUserInfo] = useState(tempUserInfo);
    // 开启moderator
    let [moderatorStatus, setModeratorStatus] = useState<boolean>(true);
    // 开启inviteStatus
    let [inviteStatus, setInviteStatus] = useState<boolean>(true);
    // 主持人
    let [moderators, setModerators] = useState<number[]>([]);
    // pros
    const { dataSource, addItemDispatch, history } = props;
    // 保存返回上一页
    const saveClick = () => {
        // 表单验证
        form.validateFields().then((res: any): void => {
            const key = dataSource.length;
            const {
                name: Name,
                number: Number
            } = res;
            const tempData = {
                key,
                Name,
                Number,
                Moderators: moderators
            };
            addItemDispatch(tempData);
            history.goBack();

        }).catch((e: any) => {
            return;
        });
        return;

    };
    // form事件
    const [form]: any = Form.useForm();
    return(
        <>
            <div style={{padding: '20px'}}>
                <Card>
                    <ProFrom
                        userInfo={userInfo}
                        setUserInfo={setUserInfo}
                        form={form}
                    />
                    <ProCheckGroup
                        moderatorStatus={moderatorStatus}
                        setModeratorStatus={setModeratorStatus}
                        inviteStatus={inviteStatus}
                        setInviteStatus={setInviteStatus}
                    />
                    <ProTransfer
                        setModerators={setModerators}
                    />

                </Card>
            </div>

            <SuperFoot>
                <Button
                    className='bigBtn'
                    type='primary'
                    icon={<SaveOutlined />}
                    style={{marginLeft: 20}}
                    onClick={saveClick}
                >
                    Save
                </Button>
                <Link to='/conference'>
                    <Button
                        icon={<CloseOutlined />}
                        style={{marginLeft: 20}}
                    >
                        Cancel
                    </Button>
                </Link>
            </SuperFoot>
        </>
    )
}

const mapStateToProps = (state: IDefaultState) => {
    return {
        dataSource: state.dataSource
    }
};
const mapDispatchToProps = (dispatch: any) => {
    return{
        addItemDispatch(userInfo: ITempUserInfo) {
            dispatch(
                actionTypes.addItem(userInfo)
            )
        }
    }
};

export default connect (mapStateToProps, mapDispatchToProps)(React.memo (ConferenceAdd));
